<div v-bind:class="[componentId]">
<clyd-home-widget-header :widget="headerData"></clyd-home-widget-header>
	<cly-section class="geo-countries-section" >
		<cly-section class="geo-analytics-data">
			<div class="bu-columns bu-is-gapless" style="height: 534px;">
				<div style="width:256px;">
					<cly-radio-block v-bind:items="chooseProperties" type="vertical" v-model="selectedProperty"></cly-radio-block>
				</div>
				<div class="bu-column leaflet-noclick-map" style="position:relative">
					<cly-worldmap
                        style="height: 100%;"
						external-country=""
						external-detail-mode="world"
						:value-type="selectedPropertyTitle"
						:show-detail-mode-select="false"
						:show-navigation="false"
						:prevent-going-to-country="true"
                        :preventLayerClick="true"
						:countries-data="countriesData"
						@country-click="regionClick"
						>
					</cly-worldmap>
					<div style="position: absolute; top: 20px; left:20px; z-index: 400;">
						<a ref="toCityViewLink" class="cly-vue-button button-light-skin ToLink" :href="buttonLink">{{buttonText}}</a>
					</div>
				</div>
			</div>
		</cly-section>
	</cly-section>
</div>